<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟效果</title>
    <style>
        *{
            margin: 0px;padding: 0px;
        }
        #clock{
            height: 600px;width: 600px;margin: 50px auto;
            background: url("images/clock.jpg") no-repeat;position: relative;
        }
        #clock div{
            position: absolute;width: 100%;height: 100%;top: 0px;left: 0px;

        }
        #clock div#hour{
            background: url("images/hour.png") no-repeat center center;
        }
        #clock div#min{
            background: url("images/minute.png") no-repeat center center;
        }
        #clock div#second{
            background: url("images/second.png") no-repeat center center;
        }
    </style>
</head>
<body>
    <div id="clock">
        <div id="hour"></div>
        <div id="min"></div>
        <div id="second"></div>
    </div>
    <script type="text/javascript">
        var hour = document.getElementById("hour");
        var min = document.getElementById("min");
        var second = document.getElementById("second");

        //定义计时器
        var h,m,s,ms = 0;
        var timer = setInterval(function () {
            var date = new Date();
            ms = date.getMilliseconds();
            s = date.getSeconds() + ms/1000;
            m = date.getMinutes() + s/60;
            h = date.getHours()/12 + m/60;
            // console.log(h);

            //旋转角度
            // 一圈  360 °     一共有 60 秒       每秒  6 °   现在是 s秒
            second.style.transform = "rotate("+s*6+"deg)"
            // 一圈  360 °     一共有 60 分钟       每分  6 °   现在是 m分
            min.style.transform = "rotate("+m*6+"deg)"
            // 一圈  360 °     一共有 12 小时       每小时  30 °   现在是 h小时
            hour.style.transform = "rotate("+h*30+"deg)"
        },1000);

    </script>

</body>
</html>